<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>人员列表</h2>
    <input type="text" v-model="keyword">
    <ul>
      <li v-for="p in filterPersons" :key="p.id">
        {{p.name}}--{{p.age}}--{{p.gender}}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        keyword: '',
        persons: [
          { id: '001', name: '马冬梅', age: 21, gender: '女' },
          { id: '002', name: '周冬雨', age: 19, gender: '女' },
          { id: '003', name: '周杰伦', age: 20, gender: '男' },
          { id: '004', name: '帅邓伦', age: 22, gender: '男' },
        ],
        filterPersons: []
      },

      watch: {
        keyword: {
          handler () {
            // 计算出要显示的列表
            const {keyword, persons} = this
            const arr = persons.filter(p => p.name.includes(keyword))
            // 更新filterPersons
            this.filterPersons = arr
          },
          immediate: true, // 初始化执行第一次
        }
      }

      // computed: {
      //   filterPersons () {
      //     // 1. 取出依赖数据
      //     const {keyword, persons} = this
      //     // 2. 计算出结果并返回
      //     const arr = persons.filter(p => p.name.includes(keyword))

      //     return arr
      //   }
      // }
    })
  </script>
</body>
</html>